انواع برنامه نويسي جهت طراحي صفحات وب؟

  در صفحات وب پويا اطلاعات موجود در يک صفحه متناسب با شرايط متعدد بصورت کاملا" سفارشي آماده خواهد گرديد. فرض کنيد در رستوراني براي صرف ناهار رفته باشيم . ليست غذاهاي موجود ( منو) که در اختيار شما قرار مي گيرد يک ليست ايستا بوده و شما در صورت تمايل مجبور خواهيد بود که يکي از آنها را انتخاب نمائيد. شما صرفا" درخواست آن غذا را خواهيد کرد و غذاي مورد نظر شما از طرف سرويس دهنده رستوران در اختيار شما گذاشته خواهد شد. تمامي مراحل مربوط به آماده سازي غذا از قبل انجام شده و نقش شما صرفا" انتخاب و درخواست است . وضعيت فوق نظير صفحات وب ايستا است . در صورتيکه طراحی  رستوران مورد نظر غذائي از پيش آماده شده را نداشته باشد و از شما بخواهد که با اختيار کامل غذاي مورد نظر خود را انتخاب نمائيد. در چنين مواردي تمهيدات لازم براي آماده سازي غذا بر اساس درخواست مورد نظر ايجاد شده و غذاي درخواست شده متناسب با نوع درخواست و تمايل فرد متقاصي ايجاد مي گردد. صفحات وب پويا نير وضعيتي مشابه را دارند.در ادامه به ويژگي هريک از اين نوع صفحات اشاره خواهد شد.صفحات وب ايستا ،  امروزه بر روي اينترنت و وب ، با سايت هاي متعددي که شامل تعداد بيشماري از صفحات وب ايستا مي باشند ، برخورد مي نمائيم. واژه " ايستا " ، در رابطه با يک صفحه وب داراي  چه  تعريفي است ؟ اين نوع صفحات ، صفحاتي هستند که شامل کدهاي Html بوده و در يک محيط اديتور تايپ و با انشعاب Htm و يا Html ذخيره مي گردد. مولف صفحه وب قبل از اينکه هر نوع درخواستي براي آن وجود داشته باشد ، بطور کامل محتوي صفحه را مشخص کرده است . محتويات اين نوع از صفحات ( متن ، تصوير ، لينک ها و ... ) و شکل ظاهري آنها همواره يکسان خواهد بود ، صرفنظر از اينکه چه کسي ، در چه زماني و يا چگونه صفحه را مشاهده خواهد کرد. بنابراين مي توان گفت ، محتويات اين قبيل از صفحات قبل از اينکه درخواستي ايجاد گردد ، توسط مديريت سايت ايجاد و مشخص شده اند. 

  مراحل آماده سازي صفحات وب ايستا

1 - يک مو.لف ،  صفحه اي را که شامل کدهاي Html است را ايجاد و آن را با انشعاب Htm و يا Html بر روي سرويس دهنده وب ذخيره مي نمايد.

2 - کاربري از طريق برنامه مرورگر خود ، در خواست استفاده از يک صفحه را مي نمايد، درخواست فوق از مرورگر براي سرويس دهنده ارسال مي گردد.

3 - سرويس دهنده وب ، فايل درخواستي با انشعاب Htm  و يا  Html را  پيدا خواهد کرد.

4 - سرويس دهنده وب  ، کدهاي Html فايل مزبور را از طريق شبکه براي مرورگر ارسال ميدارد.

5 - مرورگر کدهاي Html را پردازش و صفحه فوق را نمايش خواهد داد.

  محدوديت هاي صفحات وب ايستا

  فرض کنيد مي خواهيم يک صفحه وب را بگونه اي طراحي نمائيم ، که بمحض ورود هر کاربر زمان جاري سيستم بهراه يک پيام مناسب نمايش داده شود.. در اين زمينه با چندين محدوديت مواجه خواهيم بود که  بکمک تگ هاي Html قادر به  برطرف کردن آنها نخواهيم بود.  ما ميدانيم که يک کاربر در يک زمان خاص به ملاقات صفحه خواهد آمد ولي قطعا؛ زمان آن را نمي دانيم .اگر بخواهيم زمان را بصورت کد در صفحه Html خود داشته باشيم ، نتيجه همواره يکسان بوده و هميشه يک زمان ثابت و يکسان براي تمامي ملاقات کنندگان صفحه ، نمايش داده خواهد شد. تگ هاي Html  امکاناتي بمنظور ايجاد  صفحات وب سفارشي  و بر اساس شرايط خاص  در اختيار قرار نمي دهد. صفحات وب ايستا همواره بصورت مشابه و يکسان براي تمامي کاربران نمايش داده خواهند شد.    ( نظير رستوراني که همواره و صرفنظر از ذائقه مشتريان خود ، يک غذاي ثابت و از قبل آماده شده را براي همه آماده و در اختيار قرار مي دهد!)  Html داراي هيچگونه امنيتي نيز نبوده و کدهاي آن را همه مي توانند مشاهده و حتي تکثير گردد. شايد تنها مزيت اين نوع از صفحات طراحي آسان و بکارگيري سريع آنان در يک شبکه باشد.اين نوع صفحات داراي امکانات لازم بمنظور آفرينش صفحات پويا  نيستند،  چون  نمي توان  کدهاي مورد نظر خود  را بعد از درخواست يک صفحه به آن اضافه کرد . مي بايست بدنبال روشي و يا روش هائي بود که بکمک آنها بتوان صفحات وب پويا را ايجاد کرد. بمنظور نيل به هدف فوق از دو روش عمده استفاده مي گردد:

·           Client - side dynamic page . بهره گيري از تکنولوژيهائي که پويائي يک صفحه را از جايگاه سرويس گيرنده تحقق خواهند داد.

·         Server - side dynamic page . بهره گيري از تکنولوژيهائي که پويائي يک صفحه را از جايگاه سرويس دهنده تحقق نمايند.

  قبل از پرداختن به هر يک از موارد فوق، لازم  است در ابتدا با مفهوم و جايگاه يک سرويس دهنده وب بيشتر آشنا شويم . يک سرويس دهنده وب ، نرم افزاري است که مديريت صفحات وب را برعهده گرفته و آنها را براي سرويس گيرندگان مجهز به مرورگرها، قابل دستيابي و استفاده مي نمايد. تاکنون سرويس دهنده هاي وب متعددي طراحي و به بازار عرضه شده است . Apache ، IIS  ... نمونه هائي از اين نوع نرم افزارها هستند. IIS محصول شرکت مايکروسافت بوده و مي توان در زمان نصب ويندوز ( 2000 و يا XP) آن را نيز نصب نمود.نسخه 5 بهمراه ويندوز 2000 و نسخه 5.1 بهمراه XP   ارائه شده است . بهرحال جايگاه يک سرويس دهنده وب در ارائه امکانات و زيرساخت هاي مناسب براي طراحي صفحات وب پويا و بالطبع سايت هاي پويا يک امر برجسته است. همانگونه که اشاره گرديد، براي خلق صفحات وب پويا از دو رويکرد متفاوت استفاده مي گردد. استفاده همزمان از دو روش فوق هيچگونه تعارضي با هم نداشته بلکه بالعکس توانائي يک صفحه وب پويا را افزايش خواهد داد. در ادامه به بررسي دو رويکرد فوق خواهيم پرداخت .

 Client-side dynamic page .  در مدل فوق ماژول هائي ( Plug -in ) که به مرورگر ملحق شده اند، تمامي عمليات لازم جهت ايجاد صفحات پويا را انجام خواهند داد. کدهاي Html از طريق  فايل مربوطه که شامل مجموعه اي از دستورالعمل ها است براي مرورگر ارسال خواهد شد.مرورگرها دستورات فوق را جهت توليد کدهاي Html و در زمان درخواست يک صفحه توسط  کاربر ، استفاده خواهند کرد. بنابراين محتويات يک صفحه بر اساس درخواست کاربران و بصورت پويا ايجاد خواهد شد.

مراحل آماده شدن يک صفحه وب پويا با تاکيد بر روش هاي Client-Side

1 - يک مولف صفحه وب مجموعه اي از دستورالعمل را براي ايجاد کدهاي Html نوشته و آنها را در فايلي با انشعاب Html ذخيره مي نمايد.

2 - کاربران  درخواست يک صفحه را از طريق مرورگر خود براي سرويس دهنده وب ارسال خواهند کرد.

3 - سرويس دهنده فايل درخواستي ( در صورت نياز فايل ديگري که شامل دستورالعمل ها باشد) را پيدا خواهد کرد.

4 - سرويس دهنده وب فايل حاوي کدهاي Html و در صورت وجود دستورالعمل هاي مربوطه را براي متقاضي ارسال خواهد کرد.

5 - يک ماژول همراه مرورگر ، دستورالعمل ها را پردازش و کدهاي Html را در همان صفحه Html برمي گرداند.

6 - در نهايت کدهاي Html توسط مرورگر نمايش داده مي شوند.

 تاکنون تکنولوژيهاي متعددي بر اساس رويکرد فوق مطرح و در اختيار طراحان و مولفان صفحات وب پويا قرار گرفته شده است . جاوا اسکريپت ، Vbscript ، کنترل هاي ActiveX و اپلت هاي جاوا نمونه هائي از اين نوع تکنولوژي ها بوده که براي شناخت خوانندگان در اين بخش بصورت خيلي مختصر در رابطه با هر يک توضيحاتي ارائه خواهد شد.

جاوااسکريپت (JavaScript) ، اولين زبان اسکريپت در رابطه با مرورگرها است . زبانهاي اسکريپت بعنوان حد ميانه بين کدهاي Html و زبانهاي معمولي برنامه نويسي قرار داشته و بصورت مفسر عمل مي نمايند. جاوااسکريپت را نبايد با زبان برنامه نويسي جاوا اشتباه گرفت . شرکت نت اسکيپ در ابتدا زبان اسکريپتي با نام LiveScript پياده سازي  و بهمراه  مرورگر NetScape 2.0 در اختيار علاقه مندان قرار گرفت . زمانيکه شرکت نت اسکيپ با شرکت Sun  متحد گرديد ، نام آن را جاوااسکريپت گذاشتند.

 بخشي از گرامر زبان فوق نظير ساختار اوليه ، از جاوا گرفته شده است ( خود جاوا نيز اغلب ساختار خود را از زبان C گرفته است ) . جاوااسکريپت داراي امکانات متعدد و قدرتمندي جهت کنترل و مديريت رفتار و محتويات يک مرورگر است . زبان فوق توانائي انجام عملياتي نظير : عمليات روي فايل ها  را دارا نمي باشد .( شايد يکي از دلايل مسائل امنيتي باشد ) . فراگيري جاوااسکريپت نسبت به جاوا بمراتب راحت تر است . جاوا اسکريپت بگونه اي طراحي شده است که قادر به خلق برنامه هاي کوچک و در عين حال موثر جهت انجام عمليات متعددي نظير برخورد با رويدادهاي بوجود آمده در سطح کاربر نظير : کليک نمودن بر روي يک آيتم ، بستن يک پنجره ، فعال شدن يک صفحه ، خارج شدن از يک صفحه طراحی  ، حرکت موس روي يک آيتم و... است .  ماکروسافت نسخه اختصاصي خود از جاوااسکريپت را با نام Jscript و همزمان با معرفي مرورگر IE 3.0 در اختيار علاقه مندان قرار داد.

Vbscript . شرکت ماکروسافت همزمان با عرضه مرورگر IE 3.0 زبان اسکريپت اختصاصي خود يعني Vbscript را مطرح نمود. زبان اسکريپت فوق بر اساس زبان برنامه نويسي ويژوال بيسيک و با هدف رقابت با جاوااسکريپت در اختيار علاقه مندان قرار گرفت . شايد از معدود امتيازات اين زبان نسبت به جاواسکريپت بتوان به عدم حساسيت آن در رابطه با حروف بزرگ و کوچک (Case Sensitive) نام برد. 

کدهاي نوشته شده توسط زبان فوق صرفا؛ از طريق مرورگر شرکت ماکروسافت (IE) قابل تفسير و اجرا بوده و نت اسکيپ اين زبان را حمايت نمي کند ، گرچه با افزودن برخي Plug-In امکان استفاده از اين زبان در مرورگر نت اسکيپ نيز فراهم خواهد شد.  استفاده از زبان جاوااسکريپت بمراتب نسبت به زبان Vbscript رايج تر است . اگر قصد انتخاب يک زبان اسکريپت براي پردازش هاي متکي بر سرويس گيرنده را داشته باشيم ، بدون شک جاوااسکريپت يک گزينه مناسب خواهد بود. جاواسکريپت  و Vbscript هر دو بعنوان يک ماژول با نام Script Engine که بهمراه مرورگرها ارائه شده است ، مسئوليت تفسير و اجراي دستورالعمل هاي مربوطه را بر عهده خواهند گرفت .  در پروژه دات نت شرکت ماکروسافت VB.NET را جايگزين Vbscript نموده است.

کنترل هاي ActiveX ، يک کنترل اکتيوايکس عنصري است که توسط يکي از زبانهاي برنامه نويسي نظير C++ و يا جاوا پياده سازي مي گردند. در زمانيکه اين نوع اکتيوايکس ها را بهمراه صفحات خود استفاده نمائيم ،  امکان انجام بخشي از عمليات متکي بر سرويس گيرنده نظير ايجاد يک Bar Chart ، Timer ، تاييد کاربر و يا دستيابي به بانک اطلاعاتي فراهم مي گردد.کنترل هاي اکتيوايکس از طريق

 

از زماني که اينترنت در حد نيروي برق همه گير شده، عبارات « اينترنت » و « شبکه جهاني وب » متدوالا و به اشتباه به جاي يکديگر استفاده شده اند. اين روزها بارها عبارات « جست و جوي اينترنت » و « جست و جوي وب » را به کار مي بريم و يا اين عبارات را از افراد پيرامون خود مي شنويم. در حالي که اين دو مساله کاملا با هم متفاوت هستند.

در اين مقاله از ديفوراف، تلاش ما اين است که اين اشتباه را يک بار و براي هميشه رفع کنيم. از يک سو، اينترنت را مي توان سخت افزار نت دانست زيربنايي که از پروتوکلي خاص استفاده مي کند و باعث مي شود همه چيز در کنار هم با هماهنگي کامل کار کنند. اما از سويي ديگر شبکه جهاني وب همان نرم افزار وب است شبکه اي عظيم از نرم افزار ها و پروتوکل ها که ارتباط دهنده همه اجزا با يکديگر است.

 

در واقع وب همانطور که از اسمش پيداست مثل يک تار عنکبوت عظيم است که اجزاي تشکيل دهنده آن، ميليارد ها ميليارد کاربر در سراسر جهان هستند که از اين شبکه جهاني استفاده مي کنند.

 

اينترنت در برابر شبکه جهاني وب:

 

بنابراين شبکه اي که ما آن را با عنوان اينترنت مي شناسيم را متشکل از دو لايه تصور کنيد. لايه اي مستحکم را متصور شويد که از سيم ها، سرور ها، روتر ها، سوييچ ها، کامپيوتر ها و هر آنچه که به صورت فيزيکي شبکه اي در سر تا سر جهان ايجاد کرده تشکيل شده است. اين همان چيزي است که به آن « اينترنت » مي گوييم.

 

اينترنت چگونه طراحي شده:

 

در يک توضيح مختصر و کوتاه، اينترنت در ابتدا زيرساختي بود که پايه هاي آن از سال ???? و در نتيجه تلاش هاي آژانس پروژه هاي تحقيقاتي پيشرفته وزارت دفاع آمريکا براي ايجاد يک شبکه ارتباطي قوي در رابطه با جنگ ايجاد شد که اين شبکه ARPAnet نام گرفت که مخفف Advanced Research Projects Agency Network بود.

 

اين شبکه فيزيکي، مراکز تحقيقاتي که بر روي پروژه هاي امنيتي تمرکز داشتند را با بخش هاي دولتي و نظامي مرتبط ساخت. در واقع اين آرپانت بود که در طول سالها تغيير و تحول به چيزي تبديل شد که ما امروز آن را « اينترنت » مي خوانيم.

 

اما شبکه جهاني وب، در واقع مغز همه چيز است که همه سخت افزار و زيربناي اينترنت را به شکل نرم افزار ها وارد سرور ها و کامپيوتر ها مي کند. اين مجموعه شامل مرورگر هاي اينترنت و نرم افزار هايي مي شود که از طريق پروتوکل TCP/IP ( يکي از مهم ترين پروتوکل هاي استفاده شده در شبکه هاي کامپيوتري ) با هم در ارتباط هستند.

 

امروزه ديگر فقط صحبت از کامپيوتر ها و مرورگر هاي وب در ميان نيست. مردم ديگر به صورت فيزيکي و با استفاده از دستگاه هايي چون تبلت ها، اسمارت فون ها، موزيک ديوايس ها، کنسول هاي بازي، تلويزيون ها و حتي وسايلي مثل قاب عکس ها و دوربين هاي ديجيتال به اينترنت متصل مي شوند. تقريبا تمام دستگاه ها به اينترنت وصل مي شوند و به کاربران خود اين امکان را مي دهند تا به راحتي به سازه عظيم اينترنت دسترسي يابند.

 

اما همه اين موراد چطور کار مي کنند؟ فرض کنيد شما در اتاق خود نشسته ايد و با لپ تاپ يا تبلت خود به اينترنت متصل مي شويد. اولين کاري که مي کنيد اين است که در مرورگر، آدرس www.d4fteam.com را تايپ مي کنيد و سپس Enter را مي زنيد ( اولين کارتان همين است… مگر نه؟ :) ) همين که اينتر را مي زنيد، اطلاعات مربوطه را از شبکه جهاني وب که همان بخش نرم افزاري شبکه اطلاعات و ارتباطات است درخواست مي کنيد. پس از فشار دادن کليد اينتر، مسير ترافيک به اين شکل خواهد بود:

درخواست شما از کامپيوترتان به روتر و به ISP شما فرستاده مي شود. ترافيک اين URL بر اساس پيکربندي سرور هاي DNS منطقه شما هدايت مي شود. هر دامين ثبت شده اي در سرور هاي DNS سراسر دنيا ليست شده است تمام هدف اين سرورها فراهم آوردن IP آدرس هايي است که اطلاعات ( صفحات وب ) در آن ذخيره شده اند. سرور DNS در پاسخ، اطلاعات IP را ارسال مي کند. بنابراين حالا ISP مي داند که به کجا رجوع کند تا صفحات وب مورد نظر شما را پيدا کند.

 

ترافيک در ادامه مسير به شبکه هاي Network Service Provider يا همان NSP مي رسد. NSP در واقع شامل شبکه هايي مثل SprintNet، IBM، PSINet و… مي شود. اين شبکه ها، ستون فقرات شبکه هاي اينترنتي هستند. اگر مي توانستيد اطلاعات مورد نظرتان که در مسير اينترنت در جريان است را ببينيد، آنگاه مي ديديد که ترافيک ابتدا به نزديکترين NSP مي رسد و سپس از درگاه هاي Network Access Point يا NAP عبور مي کند که به ترافيک امکان مي دهد تا از يک NSP به NSP ديگر برود.

در نهايت درخواست شما به يک ريموت کامپيوتر در اينجا وب سرور مي رسد که وب سرور با ارسال صفحات وب مورد نظر به درخواست شما پاسخ مي دهد. سپس ترافيک از همان مسير بازمي گردد تا به کامپيوتر شما برسد. همه اين اتفاقات بسيار سريع و در يک چشم به هم زدن رخ مي دهند.

 

شبکه جهاني وب چگونه طراحي شده:

 

اين توضيحي بود براي اينکه اينترنت چطور کار مي کند، اما وقتي صحبت از شبکه جهاني وب به ميان مي آيد، اين توضيحات فقط سطح اوليه را شرح مي دهند. WWW يا همان شبکه جهاني وب به روش عمل سخت افزار و شبکه ها محدود نمي شود. وب در واقع يک تار بزرگ متشکل از اتصالات است ارتباطات آنلاين به صفحات، فايل ها، موزيک ها، ويديو ها، دانلود ها و هر چيز ديگري که روي يک سرور يا يک کامپيوتر که به شبکه عظيم فيزيکي « اينترنت » متصل است ذخيره شده باشد.

 

هر صفحه وبي که روي يک سرور ذخيره شده را يک « گره » تصور کنيد که مي تواند شامل اتصالاتي به گره هاي فراوان ديگر در اين شبکه بزرگ باشد. هر گره مي تواند يک بخش از هر نوع اطلاعاتي باشد متن، تصوير و يا هر نوع اطلاعات ديگر که به اينترنت متصل است. اين اتصلات داخلي بين گره ها است که شبکه جهاني وب را تشکيل مي دهد. در واقع اين شبکه اي از اتصالات است که مارپيچ مجازي اطلاعات را مي سازد شبکه اي که با سرعتي بسيار فراتر از سرعت گسترش فيزيکي خود اينترنت، به گسترش و توسعه ادامه مي دهد.

 

نتيجه:

 

بنابراين اگر از اين به بعد کسي عبارات « اينترنت » و « شبکه جهاني وب » را يکسان دانست، شما هم در واقع مجبور نيستيد اشتباه او را به او گوشزد کنيد. به هر حال مي توانيد در دانش شخصي خود توجه داشته باشيد که اينترنت به زيربناي فيزيکي گفته مي شود دستگاه هاي متصل به هم در شبکه در حالي که شبکه جهاني وب همان تار بزرگ نرم افزاري متشکل از گره ها و اتصالات است که اطلاعات ذخيره شده در شبکه عظيم را به هم مرتبط مي سازد.

 

 طراحی وب سایت 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>The Most Basic Web Page in the World</title>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>The Most Basic Web Page in the World</h1>

<p>This is a very simple web page to get you started.

Hopefully you will get to see how the markup that drives

the page relates to the end result that you can see on

screen.</p>

<p>This is another paragraph, by the way. Just to show how it

works.</p>

</body>

</html>

 

 

از textEditor گزينه file>save as را بزنيد پنجره اي مانند زير نمايش مي يابد:

 

 

 

مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.

 

نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html

 

از منوي كشويي save as type گزينه all files را انتخاب نماييد

 

از منوي كشويي Encoding گزينه UTF-8 را انتخاب نماييد.

 

و حالا دكمه save را بزنيد.

 

حالا در فلدر مورد نظر فايلتان را با مرورگر باز نماييد . تبريك شما اولين صفحه وب خودتان را ساختيد!

 

 

اهميت UTF-8

 

اين كاراكتر ست (Character Set) اجازه مي دهد زبان هاي ديگر هم بتوانند به درستي صفحه شما را ببينند. فرض كنيد يك كاربر كره اي كه زبان انگليسي ندارد بخواهد صفحه شما را ببيند ، اين كاراكتر ست است كه اجازه ميدهد شما با مشكلي مواجه نشويد.

 

اولين آناليز شما

 

يك مقايسه و يك آناليز ساده بين كد شما و ظاهري كه در مرورگر مي بينيد ، مي تواند در يادگيري شما كمك شاياني كند:

 

 

زمان مناسبي است كه در مورد 2 تگ p  و h1 و البته عناصر ديگر صحبت كنيم.

 

 

يك تگ بلاك و بسته شونده (container) است و براي يك بلوك متني استفاده مي شود اين بدان معني است كه متن هاي خوتان را بايد داخل اين تگ قرار دهيد.

 

ليست (list)

 

فرض كنيد مي خواهيد ليست وب سايت هاي طراحي شده خودتان را نمايش دهيد ،

 

 

و اما ليست ها دو گونه اند:

 

Ol-order list : براي ليست هاي ترتيبي

 

Ul-unorder list: براي ليستهاي غير ترتيبي

 

به مثال زير دقت كنيد:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Lists - an introduction</title>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8"/>

</head>

<body>

<h1>Lists - an introduction </h1>

<p>Here's a paragraph. A lovely, concise little paragraph.</p>

<p>Here comes another one, followed by a subheading.</p>

<h2>A subheading here</h2>

<p>And now for a list or two:</p>

<ul>

<li>This is a bulleted list</li>

<li>No order applied</li>

<li>Just a bunch of points we want to make</li>

</ul>

<p>And here's an ordered list:</p>

<ol>

<li>This is the first item</li>

<li>Followed by this one</li>

<li>And one more for luck</li>

</ol>

</body>

</html>

 

و حالا خروجي كار رو در مرورگر ببينيد تا تفاوت هاي دو نوع ليست را ببينيد

 

 

 ظاهر همه ليست ها به همين سادگي نيستند و امروزه در طراحي وب سايت حرفه اي استفاده زيادي دارد. براي نمونه مي توانيد به فوتر وب سايت شرکت طراحي سايت وب اسکالا نگاهي بياندازيد تا ديدتان نسبت به استفاده از اين عنصر بازتر شود.

 

يادگيري اين سه لايه شما را به يك طراح تبديل ميكند!

 

لايه اول لايه محتوي است كه مانند شاسي ماشين است و شامل تگهاي متفاوتي مي باشد .لايه دوم لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.

چيزي كه در اين كتاب آموزش داده مي شود مربوط به 2 لايه  HTML و  CSS است.

 

 

ديدن كد برنامه مي تواند به يادگيري شما سرعت ببخشد البته بايد در انتخاب وب سايت خود دقت نماييد تا اشتباه آنها مسير يادگيري شما را تغيير ندهد. روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source  يا view source را بزنيد.

بايد صفحه اي مانند زير در فايرفاكس ببينيد:

 

عناصر اصلي يك صفحهHTML :

 

 يک DocType

يک<html> tag

يک<head>  tag

يک<title>   tag

يک<body>   tag

 

براي ديدن تصوير واضحتر روي تصوير بالا کليک کنيد

 

و حالا يك نمونه كد فقط شامل عناصري اصلي :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>Untitled Document</title>

         <meta http-equiv="Content-Type   content="text/html; charset=utf-8"/>

    </head>

    <body>

    </body>

</html>

 

حالا مي خواهيم با تك تك اين عناصر آشنا شويم :

 

داك تايپ DocType  : Document Type Definition 

 

اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.

در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.

داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5  كه به تازگي مطرح شده است.

براي ديدن داك تايپ هاي موجود به اين آدرس بريدhttp://reference.sitepoint.com/html/doctypes

 

<!DOCTYPE  html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

به کدهاي داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium يا W3C ، اشاره كند کدام است.

در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional  و  Strict 

 

عناصر HTML  :

 

قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag)  آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

تگ HTML    <html>

تگ HEAD   <head>

 

تگ ها مي توانند شامل چند attribute  (ويژگي) باشند:

<html   xmlns="http://www.w3.org/1999/xhtml "  dir="rtl" >

 

dir يك نام  attribute است و rtl ، value (مقدار) آن است كه بين " " قرار گرفته است.

 

  

تگ ها به دودسته container و empty  تقسيم مي شوند.تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML  باز شده و بسته شده است. تگهاي empty  متفاوت هستند 

 

تگ هاي empty  را مي توان به صورت container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده است كه تگ هاي empty را به همان شكل empty  بنويسيم

در استفاده از تگ ها بايد دانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيم دچار error مي شويم.

نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :

empty tag in html

 

بسيار عالي شما هم اين نتايج را پيدا كرديد :

• <br/>

• <hr/>

• <meta/>

• <base/>

• <link/>

• <meta/>

• <img/>

• <embed/>

• <area/>

• <input/>

 

عنصر HAED

 

اين يك تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و .....

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>

عنصر  title :

 

• اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است

• در زمان بوكمارك كردن صفحه با اين عنوان  در ليست ما ذخيره مي شود

• براي معرفي آن صفحه است 

• براي موتورهاي جستجو هم حائز اهميت مي باشد چيزي که در بهينه سازي وب سايت  وب اسکالا هم استفاده شده است

 

عنصر meta  :

 

متا تگ يك تگ empty است و براي  دلايل متفاوتي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ....

Css و  javascript  هم در  head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي  در طراحي هاي حرفه اي  قائل شد. به طور مثال سورسي که در طراحي سايت فوق استفاده شده است را مشاهده نماييد. جاوا اسکريپت در پايين صفحه درج شده است.

 

عناصر body :

 

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و .......

در قسمت بعدي به طور عملي با هم يك وب سايت مي سازيم!

 

 

نظم در برنامه نويسي ارزش بالايي دارد به طوري که مي بايست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نويس ديگري باشد. يکي از ابزارهايي که در اين زمينه به ما کمک مي کند گذاشتن کامنت است.

کامنت در واقع نوشته هايي است که در سورس برنامه وجود دارند ولي در نمايش خروجي ظاهر نمي شوند . کامنت گذاري در HTML  و CSS و JavaScript  کاربرد زيادي دارند. به مثال زير دقت کنيد:

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Comment example</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <p>I really, <em>really</em> like this XHTML stuff.</p>

    <!-- Added emphasis using the em element. Handy one, that. -->

    </body>

    </html>

 

 

و خروجي بدين صورت است:

 

design-web-41.gif

در واقع با کامنت توضيح داده است  که چرا از تگ em  استفاده کرده است. کامنت  گذاري در HTML   بيشتر براي جدا کردن قسمت هاي مختلف وب سايت مي باشد به طور مثال قسمت منو را با کامنت مشخص مي کنيم و مي گويم  مثلا اين قسمت از HTML براي منو است.

 

نحوه نوشن کامنت در HTML بدين صورت است:

 

    <!-- Begi Navigation -->

 

 

در جاوا اسکريپت به 2 صورت زير صورت :

 

    /* comment  */

    // comment

 

 

و در CSS :

 

    /*  comment  */

 

 

بگذاريد يک ذره جلوتر برويم و يک استفاده حرفه اي تر کامنت را هم براتون توضيح بدهم :

 

استفاده ديگر کامنت زماني است که مي خواهيد قسمتي از کد خودتونو  نمايش نديد و يا براي مدتي پنهان کنيد در آن زمان است که قسمت مربوطه را کامنت مي کنيد که بعدا هم قابل برگشت است .

 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Commenting out XHTML</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>Current Stock</h1>

    <p>The following items are available for order:</p>

    <ul>

    <li>Dark Smoke Window Tinting</li>

    <li>Bronze Window Tinting</li>

    <!-- <li>Spray mount</li>

    <li>Craft knife</li> -->

    </ul>

    </body>

    </html>

 

 

 و حالا خروجي برنامه

 

design-web-42.gif

 

دقت کنيد که 2 آيتم  li نمايش نمي يابد ولي حذف نشده تا شايد در آينده دوباره فعال شوند.

 

اگر سوالي در اين قسمت داريد در بخش کامنت ها پاسخ خواهم داد و يا از طريق فرم تماس وب سايتم با من در تماس باشيد .

 

 

کاراکترها وسمبل ها و نحوه استفاده در  XHTML

 

براي آگاهي از اين کد ها ميتوانيد به اين آدرس رجوع کنيد.

 

نقطه شروع هر وب سايت صفحه اول آن است که با نام  index  ويا default  شناخته خواهد شد. ما در يک مثال کاربردي تگ هايي که تا به حال آموختيم به اضافه دو خصوصيت جديد اضافه کردن تصوير و ارسال ايميل را خواهيم آموخت.

 

مثال زير را در اديتور خود بنويسيد و با نام index.html  ذخيره نماييد

 

 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>BubbleUnder.com</h1>

    <p>Diving club for the south-west UK - let's make a splash!</p>

    <h2>Welcome to our super-dooper Scuba site</h2>

    <p>Glad you could drop in and share some air with us! You've

    passed your underwater navigation skills and successfully

    found your way to the start point - or in this case, our home

    page.</p>

    <h3>About Us</h3>

    <p><img  src="divers-circle.jpg" width="200" height="162"

    alt="A circle of divers practice their skills"/></p><p>When we're not diving, we often meet up in a local pub

    to talk about our recent adventures (any excuse, eh?).</p>

    <h3>Contact Us</h3>

    <p>To find out more, contact Club Secretary Bob Dobalina

    on 01793 641207 or <a

    href="contacttest@test,com">email

    [email protected]</a>.</p> </body>

    </html>

 

 

 

 حالا خروجي را ببينيم :

 

design-web-43.gif

در مورد تگ هاي p  و h قبلا صحبت کرده ايم ولي اينجا در قسمت contact متن آبي رنگي را مي بينيد که لينک است يعني تگ a ولي يک لينک معمولي نيست .اين يک لينک براي ارسال ايميل است و اگر در ويندوز خود برنامه مديريت ايميل داشته باشيد مانند outlook با آن مي توانيد به شخص مورد نظر ايميل ارسال نماييد.

صفحاتي که تا به حال درست کرده ايم به صورت متني و بسيار کسل کننده است و براي جذابيت بيشتر مي بايست از عکس ها استفاده کرد . با استفاده از تگ img مي توان تصاوير را به صفحه اضافه کرد. بدين ترتيب :

 

    <img  src="divers-circle.jpg"  width="200" height="162" alt="A circle of divers practice their skills" />

 

 

اين تگ يک تگ empty است و داراي attribute هاي زير است :

 

src  براي آدرس عکس

 

alt  براي توضيح تصوير

 

width عرض تصوير به پيکسل

 

height ارتفاع تصوير به پيکسل

 

فقط دقت نماييد که آدرس از جايي که صفحه شما قرار دارد حساب ميشود يعني اگر تصوير در همان فولدري باشد که صفحه شما قرار دارد به طريق بالا آدرس مي گيرد.

 

Alt هم متني است که عکس را توصيف مي کند و در مرورگرهاي متني و يا زماني که مرورگر تصاوير را نشان نميدهد به جاي نمايش عکس اين متن نمايش مي يابد و اما فايده ديگر اهميتش براي موتورهاي جستجو است.

 

اين نکته را هم در پايان اضافه کنم که براي Valid شدن در XHTML صفحه وجود alt  الزامي است .

 

 

در سلسله آموزشهاي طراحي سايت آنلاينر به بخش سوم Event attribute در html پرداختيم.

 

رويداد هاي موس Mouse Events

onclick : اين رويداد زماني اجرا ميشود که روي عامل مورد نظر کليک شود.

ondblclick :اين رويداد زماني اجرا ميشود که روي عامل مورد نظر دابل کليک شود.

ondrag :اين رويداد زماني اجرا ميشود که عامل مورد نظر درگ شود.

ondragend :اين رويداد در پايان عمليات درگ  اجرا ميشود.

ondragenter :اين رويداد زماني اجرا ميشود که عامل مورد نظر در مقصد معتبري درگ شود.

ondragleave :اين رويداد زماني اجرا ميشود که عامل مورد نظر توسط درگ از مکان معتبر خود خارج شود.

ondragover :اين رويداد زماني اجرا ميشود که عامل درگ شده وارد منطقه معتبر شود.

ondragstart :اين رويداد زماني اجرا ميشود که عمليات درگ شروع شود.

ondrop :اين رويداد زماني اجرا ميشود که عامل درگ شده رها شود.

onmousedown :اين رويداد زماني اجرا ميشود که يکي از دکمه هاي موس پايين فشرده شود.

onmousemove :اين رويداد زماني اجرا ميشود که موس حرکت داده شود.

onmouseout :اين رويداد زماني اجرا ميشود که اشاره گر موس از محدوده عامل مورد نظر خارج شود.

onmouseover :اين رويداد زماني اجرا ميشود که اشاره گر موس وارد محدوده عامل مورد نظر شود.

onmouseup :اين رويداد زماني اجرا ميشود که يکي از دکمه هاي موس رها شود.

onmousewheel :اين رويداد زماني اجرا ميشود که دکمه چرخشي موس چرخش داده شود.

onscroll :اين رويداد زماني اجرا ميشود که در نوار اسکرول عامل مورد نظر اسکرول شود.

 

طراحی وب سایت

 

<!DOCTYPE html>

<html>

<head>

<script>

function mouseDown()

{

document.getElementById("p1").style.color="red";

}

 

function mouseUp()

{

document.getElementById("p1").style.color="green";

}

</script>

</head>

<body>

 

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">

روي متن کليک کنيد.</p>

 

</body>

</html>

در مثال بالا هنگامي که روي پاراگراف کليک کنيد تابع mouseDown() رنگ متن را قرمز و با رها کردن کليد موس تابع onmouseup اجرا ميشود . اين تابع نيز رنگ متن را به سبز تغيير ميدهد

HTML اصولاً براي مشخص کردن هويت عناصر صفحه به وجود آمد. يعني براي اينکه مشخص شود کدام بخش صفحه يک پاراگراف است يا کدام قسمت سرفصل است و کدام بخش يک جدول است و... براي اين منظور هم از يک سري تگ استاندارد نظير <p> ، <h1> و <table> استفاده مي شد. وظيفه اي که براي HTML در نظر گرفته شده بود فقط همين بود و نحوه نمايش اين عناصر بر عهده مرورگرهاي وب بود. براي مثال مشخصاتي نظير فونت متن، رنگ و مشخصاتي از اين قبيل را مرورگر انتخاب مي کرد و HTML در قالب بندي عناصر صفحه نقشي نداشت.

 

به تدريج مرورگرهاي بزرگ مثل اينترنت اکسپلورر و Netscape از تگهاي HTML جديدي براي قالب بندي و تعيين ظاهر صفحات وب استفاده کردند مانند تگ <font> که براي تعيين فونت متن مورد استفاده قرار مي گيرد و شناسه color که رنگ متن را مشخص مي کند.

 

صفحاتي که با HTML 3.2 نوشته شده اند به دليل استفاده از اين تگها براي قالب بندي صفحه به کد نويسي بيشتري احتياج و در نتيجه صفحه اي که با اين روش به وجود مي آيد مملو از تگهاي HTML مي شود و در نتيجه حجم صفحات افزايش مي يابد و سرعت لود شدن آنها کاهش پيدا مي کند. علاوه بر اين اصل جدايي محتويات صفحه از قالب آن هم رعايت نمي شود.

 

استفاده از استايل و شيوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS براي قلب بندي عناصر صفحه استفاده مي شود. براي مثال با آن مي توان براي قسمتهاي مختلف در صفحه تصوير زمينه تعيين کرد، فونت آنها را تغيير داد، رنگ متن ها را تغيير داد و بسياري از قابليتهاي ديگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار مي گيرد. براي توضيحات بيشتر و يادگيري CSS مي توانيد از لينک زير استفاده کنيد :

 

آموزش استفاده از شيوه نامه ها (CSS) در طراحي صفحات وب

نوشتن صفحات پوياي طرف کاربر با جاوا اسکرپت

جاوا اسکرپت گسترده ترين زبان اسکرپت نويسي مورد استفاده در اينترنت است. بسياري از سايتها از اين زبان براي ساختن صفحات پويايي که در کامپيوتر کاربر اجرا مي شوند استفاده مي کنند. تقريباً همه مرورگرهاي مشهور از اين زبان پشتيباني مي کنند و اگرچه امکان غير فعال کردن آن توسط کاربران وجود دارد اما طبق آمار جاوا اسکرپت در مرورگرهاي بيش از 90 درصد کاربران اينترنت فعال است.

 

در حقيقت HTML را نمي توان يک زبان برنامه نويسي دانست ولي جاوا اسکرپت يک زبان برنامه نويسي با ساختاري ساده است که مي تواند عناصر HTML را بخواند، بنويسيد و يا آنها را تغيير دهد. جاوا اسکرپت توانايي واکنش نشان دادن به رويداد ها را در صفحه HTML دارد. براي مثال مي توان کد جاوا اسکرپتي نوشت که در هنگام ارسال يک فرم اجرا شود.